<template>
  <el-dialog
    title="角色管理"
    width="30%"
    :append-to-body="true"
    :visible.sync="showTag"
  >
    <el-table
      ref="table"
      border
      size="mini"
      :data="data"
      highlight-current-row
      @current-change="currentChange"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="mini"
            @click="$refs.table.setCurrentRow(row)"
          >
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  name: "AdminRoleDialog",
  data() {
    return {
      form: {},
      info: {},
      data: [],
      showTag: false
    };
  },
  methods: {
    show(info) {
      this.info = info;
      this.showTag = true;
      this.getData();
    },
    hide() {
      this.showTag = false;
    },
    async getData() {
      this.data = await this.$adminService.roleList();
      this.data.unshift({
        id: "",
        name: "无"
      });
    },
    currentChange(data) {
      if (!data || !data.name) return;
      this.$confirm(`是否给管理员${this.info.name}设置角色为${data.name}`).then(
        async () => {
          if (
            await this.$adminService.update({
              id: this.info.id,
              role_id: data.id
            })
          ) {
            this.hide();
            this.$emit("ok");
          }
        }
      );
    }
  }
};
</script>

<style scoped></style>
